import React, { Component } from 'react'

export default class ShoppingCar extends Component {
    constructor(props){
        super(props);
        this.state={
            totalNum:0,
            totalPrice:0,
            checkAll:false,
            list:[{id:1,name:"React入门",num:1,price:59,checked:false},{id:2,name:"React进阶",num:2,price:69,checked:false},{id:3,name:"React入狱",num:3,price:99,checked:false}]
        }
    }
    add(item,n){
        this.setState({
            list:this.state.list.map(t=>{
                if(t==item){
                    t.num=t.num+n;
                }
                return t;
            })
        },()=>{
            this.total();
        })
    }
    del(id){
        this.setState({
            list:this.state.list.filter(t=>t.id!=id)
        },()=>{
            this.setState({
                checkAll:this.state.list.every(item=>item.checked)
            })
            this.total();
        })
    }
    checkallbtn=(flag)=>{
        this.setState({
            checkAll:flag,
            list:this.state.list.map((item)=>{
                item.checked=flag;
                return item;
            })
        },()=>{
            this.total();
        })

    }
    checkonebtn=(flag,item)=>{
        this.setState({
            list:this.state.list.map(info=>{
                if(info==item){
                    info.checked=flag; 
                }
                return info;
            })
        },()=>{
            this.setState({
                checkAll:this.state.list.every(item=>item.checked)
            })
            this.total();
        })
    }
    total(){
        let num=0;
        let price=0;
        let res=this.state.list.filter(item=>item.checked);
        if(res.length){
            num=res.map(item=>item.num).reduce((a,b)=>a+b);
            price=res.map(item=>item.num*item.price).reduce((a,b)=>a+b);
        }

        this.setState({
            totalNum:num,
            totalPrice:price
        })
        
    }
  render() {
    return (
        <>
      <div>ShoppingCar</div>
      <div className="table">
          <div className="tr">
              <div className="td"><input type="checkbox" checked={this.state.checkAll} onChange={(e)=>{this.checkallbtn(e.target.checked)}}></input>全选</div>
              <div className="td">商品名称</div>
              <div className="td">数量</div>
              <div className="td">单价</div>
              <div className="td">小计</div>
              <div className="td">操作</div>
          </div>
          {this.state.list.map((item)=>{
              return <div className="tr" key={item.id}>
              <div className="td"><input type="checkbox" checked={item.checked} onChange={(e)=>{
                  this.checkonebtn(e.target.checked,item);
              }}></input></div>
              <div className="td">{item.name}</div>
              <div className="td">
                  {item.num<=1?"":<button onClick={()=>{this.add(item,-1)}}>-</button>}
                  <input type="text" value={item.num} onChange={()=>{}}></input>
                  <button onClick={()=>{this.add(item,1)}}>+</button>
              </div>
              <div className="td">{item.price}</div>
              <div className="td">{item.price*item.num}</div>
              <div className="td" onClick={()=>{
                  this.del(item.id);
              }}>删除</div>
          </div>
          })}
          <div className="tr">
              <div className="td"></div>
              <div className="td"></div>
              <div className="td">{this.state.totalNum}</div>
              <div className="td"></div>
              <div className="td">{this.state.totalPrice}</div>
              <div className="td"></div>
          </div>
      </div>
      </>
    )
  }
}
